<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的歌曲列表</title>
</head>
<body>

<div>
    <a href="space.html">大厅</a>
</div>
<div id="app">
    <!--    对话框-->
    <template>
        <el-row>
            <a href="addSong.html">创建歌曲</a>
        </el-row>
        <!--    创建歌曲对话-->
        <el-button type="text" @click="dialogVisible = true">上传歌曲</el-button>
        <el-dialog title="上传歌曲" :visible.sync="dialogVisible" width="30%">
            <el-form>
                <el-form-item label="歌名">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="音乐文件">
                    <input type="file" ref="fileInput" @change="handleFileChange">
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
  </span>
        </el-dialog>
    </template>
<!--    表单-->
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="userName" label="作者" width="100"></el-table-column>
            <el-table-column prop="name" label="歌名" width="100"></el-table-column>
            <el-table-column label="播放" width="400" class-name="audio-cell">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath" @play="handlePlayCount(scope.row)" ></audio>
                </template>
            </el-table-column>
            <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
            <el-table-column prop="playCount" label="播放量" width="100"></el-table-column>
            <el-table-column
                   label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleLike(scope.row)">点赞/取消</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
<!--    分页工具-->
    <template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 5, 10, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </template>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        mounted(){
            this.selectAll();
        },
        methods:{
            selectAll(){//alert(this.currentPage+" "+this.pageSize)
                // axios({
                //     method: "get",
                //     url: "/MVCDemo/song/getSongListByUserId?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
                axios.get('/MVCDemo/song/getSongsByUserId', {
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(resp=>{//alert(resp.data.totalCount)
                    // 设置表格数据
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    // 设置总记录数
                    this.totalCount = resp.data.totalCount;
                })
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.currentPage=1;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.selectAll();
            },
            handleDelete(song) {
                this.$confirm('此操作将永久删除该歌曲, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/MVCDemo/song/deleteSong?songId="+song.id)
                        .then(resp => {
                            this.$message(resp.data.message);
                                this.selectAll();
                        })
                });
            },handleLike(song) {
                axios({
                    method: "post",
                    url: "/MVCDemo/song/songLike?songId="+song.id,
                }).then(resp=>{
                    this.$message(resp.data.message);
                    // alert(resp.data.message);
                    this.selectAll();
                })
            },handlePlayCount(song) {
                axios({
                    method: "post",
                    url: "/MVCDemo/song/addPlayCount?songId="+song.id,
                }).then(resp=>{
                    // alert(resp.data.message);
                    this.selectAll();
                })
            }, // 文件选择处理
            handleFileChange(event) {
                this.formData.file = event.target.files[0];
            },
            // 提交表单
            submitForm() {
                if (!this.formData.name || !this.formData.file) {
                    this.$message('请填写完整信息');
                    return;
                }
                const formData = new FormData();
                formData.append('name', this.formData.name);
                formData.append('file', this.formData.file);
                axios.post("/MVCDemo/song/addSong", formData).then(resp=> {
                    // 显示信息
                    this.$message(resp.data.message);
                    this.dialogVisible = false;
                    this.selectAll();
                }).catch(error=>{
                    this.$message(error.data?.message || '上传失败');
                });
            }
        },
        data() {
            return {
                //
                formData: {
                    name: '',
                    file: null
                },
                //对话框显示状态
                dialogVisible: false,
                //歌曲集合
                tableData: [],
                //每页显示多少条
                pageSize:5,
                //当前页码号
                currentPage: 1,
                //总歌曲数
                totalCount:0,
            };
        }
    })
</script>
</body>
</html>